// 当媒体特征触发的时候会执行下方的样式
// 媒体特征:屏幕的最大宽度是500px,也就是当屏幕的width超过了500px,那么这条特征就不成立
// 当前屏幕最大宽度是500px的时候,才会执行下方样式
// 也就是就是当屏幕width小于等于500px的时候,执行下方css样式
// ~~~~~
@media only screen and (max-width: 500px) {
  // body {
  //   background-color: lightblue;
  // }
}

@media only screen and (max-width: 1125px) {
  body,
  html {
    #root {
      header#header.header-navigation {
        margin: auto;
        nav {
          width: 100%;
          padding: 0;
          position: relative;
          .logo {
            width: 100%;
          }
          #starlist {
            display: none;
          }
          #mnavh {
            position: absolute;
            display: block;
            top: 8px;
            right: 10px;
            cursor: pointer;
            .navicon {
              display: block;
              position: relative;
              width: 30px;
              height: 5px;
              background-color: #000;
              margin-top: 20px;
            }
            .navicon::before {
              margin-top: -10px;
              content: '';
              display: block;
              width: 30px;
              height: 5px;
              position: absolute;
              background: #000;
              -webkit-transition-property: margin, -webkit-transform;
              transition-property: margin, -webkit-transform;
              transition-property: margin, transform;
              transition-property: margin, transform, -webkit-transform;
              -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
            }
            .navicon::after {
              margin-top: 10px;
              content: '';
              display: block;
              width: 30px;
              height: 5px;
              position: absolute;
              background: #000;
              -webkit-transition-property: margin, -webkit-transform;
              transition-property: margin, -webkit-transform;
              transition-property: margin, transform;
              transition-property: margin, transform, -webkit-transform;
              -webkit-transition-duration: 300ms;
              transition-duration: 300ms;
            }
          }
          #mnavh.open {
            .navicon {
              background: none;
            }
            .navicon::before {
              margin-top: 0;
              -webkit-transform: rotate(45deg);
              transform: rotate(45deg);
            }
            .navicon::after {
              margin-top: 0;
              -webkit-transform: rotate(-45deg);
              transform: rotate(-45deg);
            }
          }
          #starlist {
            background: rgba(255, 255, 255, 1);
            position: absolute;
            top: @header-height;
            right: 0;
            box-shadow: 0 1px 1px rgb(0 0 0 / 4%);

            li {
              display: block;
              width: 50%;
              padding: 0;
            }
          }
        }
      }
      article {
        width: 96%;
        .l_box {
          display: none;
        }
        .r_box {
          width: 100%;
        }
      }
    }
  }
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
  .home {
    ul {
      li {
        width: 45%;
        padding: 6px;
      }
    }
  }
}

@media only screen and (max-width: 479px) {
  .home {
    ul {
      li {
        width: 45%;
        padding: 6px;
      }
    }
  }
  .notes {
    .bloginfo {
      .blogpic {
        display: block;
        width: 100%;
        margin: auto;
        max-height: 120px;
        float: none;
      }
    }
  }
}
